<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
    
    <title>Jetpack Compose Alpha 版现已发布！ | ApocalypseBlog</title>
    <canvas id="header_canvas"style="position:absolute;bottom:0"></canvas> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    

    

    

    

    
<link rel="stylesheet" href="/dist/build.css?v=1.14.0.css">

    <script src="/javascripts/bubble.js"></script>
    <script>
        window.isPost = true
        window.aomori = {
            
            
        }
        window.aomori_logo_typed_animated = false
        window.aomori_search_algolia = false

    </script>
<script>
    ((window.gitter = {}).chat = {}).options = {
      room: 'ApocalypseBlog/Apocalypse'
    };
  </script>
  <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
<meta name="generator" content="Hexo 5.3.0"></head>
<!--DaoVoice服务http://blog.daovoice.io/-->

    <script>(function (i, s, o, g, r, a, m) {
        i['DaoVoiceObject'] = r;
        i[r] = i[r] ||
          function () {
            (i[r].q = i[r].q || []).push(arguments);
          };
        i[r].l = 1 * new Date();
        a = s.createElement(o);
        m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        a.charset = 'utf-8';
        m.parentNode.insertBefore(a, m);
      })(window, document, 'script', ('https:' === document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/b00f5052.js", 'daovoice');
      daovoice('init', {
        app_id: "b00f5052",
      });
      daovoice('update');
    </script>
  
<body>

    <div class="container">
    <header class="header">
        <div class="header-type">
            
            <div class="header-type-inner">
                
                    <a class="header-type-title" href="/">ApocalypseBlog</a>
                
    
                
            </div>
        </div>
        <div class="header-menu">
            <div class="header-menu-inner">
                
            </div>
            <div class="header-menu-social">
                
            </div>
        </div>

        <div class="header-menu-mobile">
            <div class="header-menu-mobile-inner" id="mobile-menu-open">
                <i class="icon icon-menu"></i>
            </div>
        </div>
    </header>

    <div class="header-menu-mobile-menu">
        <div class="header-menu-mobile-menu-bg"></div>
        <div class="header-menu-mobile-menu-wrap">
            <div class="header-menu-mobile-menu-inner">
                <div class="header-menu-mobile-menu-close" id="mobile-menu-close">
                    <i class="icon icon-cross"></i>
                </div>
                <div class="header-menu-mobile-menu-list">
                    
                </div>
            </div>
        </div>
    </div>

</div>

    <div class="container">
        <div class="main">
            <section class="inner">
                <section class="inner-main">
                    <div class="post">
    <article id="post-ckk6o6aun00087kny5dvfhboi" class="article article-type-post" itemscope
    itemprop="blogPost">

    <div class="article-inner">

        
          
        
        
        

        
        <header class="article-header">
            
  
    <h1 class="article-title" itemprop="name">
      Jetpack Compose Alpha 版现已发布！
    </h1>
  

        </header>
        

        <div class="article-more-info article-more-info-post hairline">

            <div class="article-date">
  <time datetime="2020-09-08T06:31:54.000Z" itemprop="datePublished">2020-09-08</time>
</div>

            

            

            

        </div>

        <div class="article-entry post-inner-html hairline" itemprop="articleBody">
            <p><img src="http://mmbiz.qpic.cn/mmbiz_png/rFWVXwibLGtw9y7BgGYN5JAMv0vVBgVAqa2psKsvle7boLicRILqY37F8oQUASndJx3HBMGkRTKmQXZAYmGysgTg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="img">Jetpack Compose 是一个现代化的 UI 工具包，旨在帮助开发者通过原生平台 API 简单快捷地在全 Android 平台构建精美应用，它能大幅降低代码量并包含交互式工具，以及使用直观的 Kotlin API，为您的应用增添活力。现在，我们正式发布 Jetpack Compose 的 Alpha 版本，邀请您体验！</p>
<a id="more"></a>

<ul>
<li><p>Jetpack Compose</p>
<p><a target="_blank" rel="noopener" href="https://developer.android.google.cn/jetpack/compose">https://developer.android.google.cn/jetpack/compose</a></p>
</li>
</ul>
<p>开发者们通过构建应用演绎价值和实现理想。开发效率的提升离不开三个重要因素: 编程语言、集成开发环境 (IDE) 以及用户界面 (UI) 框架。我们为大家带来的 Jetpack Compose，目的就是为了让您 (我们也是！) 能在构建 UI 上更加高效！</p>
<p>起初，我们计划通过一系列的 Android Jetpack 开发库解决 Android 开发中最困难、最常见的问题，帮助开发者们在所有的 Android 版本上运行高质量的应用。如今 Google Play 商店排名前一万的应用中，已经有 84% 的应用使用了 Jetpack 库。</p>
<ul>
<li><p>Android Jetpack</p>
<p><a target="_blank" rel="noopener" href="https://developer.android.google.cn/jetpack">https://developer.android.google.cn/jetpack</a></p>
</li>
</ul>
<p>进而，我们还了解到 Kotlin 深受开发者的喜爱，如今在排名前一千名的应用中，有超过 70% 的应用使用了 Kotlin，60% 的专业 Android 开发者都在使用 Kotlin。Google Home 应用使用了 Kotlin 之后，在某些情况下减少了 80% 代码行数，NullPointerExceptions 与过去同期相比减少 33%。还有，多邻国 (Duolingo) 应用使用了 Kotlin 之后，肉眼可见的代码行数平均减少了 30%。</p>
<ul>
<li><p>Google Home</p>
<p><a target="_blank" rel="noopener" href="https://developer.android.google.cn/stories/apps/google-home">https://developer.android.google.cn/stories/apps/google-home</a></p>
</li>
<li><p>多邻国 (Duolingo)</p>
<p><a target="_blank" rel="noopener" href="https://developer.android.google.cn/stories/apps/duolingo-kotlin">https://developer.android.google.cn/stories/apps/duolingo-kotlin</a></p>
</li>
</ul>
<p>最后，我们通过社区收集到了一些强烈的建议，开发者们希望可以使用一些声明式的 API 来降低 UI 构建的难度。Jetpack Compose 结合刚刚提到的三点优势应运而生——可大规模构建高质量应用的 API、直观的编程语言以及响应式的编程模型。</p>
<p><img src="http://mmbiz.qpic.cn/mmbiz_png/rFWVXwibLGtw9y7BgGYN5JAMv0vVBgVAqjsmxSqFkxsCluDBzPkXmLY9IcfShcicSuRXHWyNpCQzH54QxxjmT3KQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="img"></p>
<p>Jetpack 的 Hello World</p>
<p><strong>Jetpack Compose: Alpha 版现已发布</strong></p>
<p><strong>Jetpack Compose Alpha 版本</strong>提供了用于构建成熟 Android 应用所需的功能，不仅有高效的工具，还可以和现有 Android 视图进行互操作，您无需重新编写您的应用。Compose API 是与一组使用 Material Design 规范的示例应用一起设计和开发的！我们很高兴发布这些应用！您还可以直接在 Android Studio 中导入和浏览最新的示例。</p>
<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/rFWVXwibLGtw9y7BgGYN5JAMv0vVBgVAqMFSgyd2AWAr2rDKTJYL2mOVZW0j7j73dj3B3hVGvmo9mspzjCnUM8g/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" alt="img"></p>
<ul>
<li><p>规范的示例应用</p>
<p><a target="_blank" rel="noopener" href="http://www.github.com/android/compose-samples">http://www.github.com/android/compose-samples</a></p>
</li>
<li><p>导入和浏览</p>
<p><a target="_blank" rel="noopener" href="https://developer.android.google.cn/jetpack/compose/setup#sample">https://developer.android.google.cn/jetpack/compose/setup#sample</a></p>
</li>
</ul>
<p>Alpha 版本发布内容如下: </p>
<ul>
<li>Animations</li>
<li>Constraint Layout</li>
<li>无障碍初步支持</li>
<li>输入和手势</li>
<li>与视图的互操作性 (可以在您现有的 app 中混合可以组合的功能)</li>
<li>懒加载列表</li>
<li>Material UI 组件</li>
<li>性能优化</li>
<li>测试</li>
<li>文本和可编辑文本</li>
<li>主题和图形</li>
<li>Window 管理</li>
</ul>
<p>在与 JetBrains Kotlin 团队的紧密合作下，我们也为 Android Studio 4.2 canary 添加了一系列新功能来帮助您使用 Compose 构建应用:</p>
<ul>
<li><p>Compose 代码自动补全</p>
</li>
<li><p>Compose 预览注解</p>
</li>
<li><p>部署单个可组合的组件到任何设备上</p>
</li>
<li><p>交互式 Compose 预览</p>
</li>
<li><p>可以生成代码的 Kotlin 编译器插件</p>
</li>
<li><p>适用于 Compose 的示例数据 API</p>
</li>
</ul>
<ul>
<li><p>JetBrains Kotlin 团队</p>
<p><a target="_blank" rel="noopener" href="https://kotlinlang.org/">https://kotlinlang.org/</a></p>
</li>
<li><p>Romain 的视频 - Jetpack Compose</p>
<p><a target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=U5BwfqBpiWU">https://www.youtube.com/watch?v=U5BwfqBpiWU</a></p>
</li>
</ul>
<p><strong>Compose 的编程思想</strong></p>
<p>Compose 使用的编程模型与 Android 上现有的构建 UI 的模型完全不同。从历史上看，Android 的视图层次结构一直被描述为 UI 组件树。随着 app 状态的变化，需要更新 UI 层次结构来显示当前的数据。更新 UI 最常见的方法是使用像 findViewById() 这样的方法去遍历 UI 组件树，并通过调用类似下面的这些方法来改变节点:</p>
<ul>
<li><pre><code class="kotlin">button.setText(String)</code></pre>
</li>
</ul>
<ul>
<li><pre><code class="kotlin">container.addView(View)</code></pre>
</li>
</ul>
<ul>
<li><pre><code class="kotlin">img.setImageBitmap(Bitmap)</code></pre>
</li>
</ul>
<p>这些方法会改变组件的内部状态。这不仅乏味繁琐，而且手动更新视图也会增加出错的可能性 (例如忘记更新视图)。Jetpack Compose 是一种完全基于声明式组件的方法，这意味着您需要将 UI 描述为将数据转换为 UI 层级结构的函数。当基础数据发生变化时，Compose 框架会自动为您更新 UI 层次结构，从而使您可以轻松快速的构建 UI。</p>
<ul>
<li><p>观看视频: 用 Compose 思考</p>
<p><a target="_blank" rel="noopener" href="https://youtu.be/SMOhl9RK0BA">https://youtu.be/SMOhl9RK0BA</a></p>
</li>
</ul>
<p><strong>与现有 Android 视图完全互操作</strong></p>
<p>对于现有的项目和代码库来说，采用任何新的框架都是一个很大的改变，这就是为什么我们把 Compose 设计得和 Kotlin 一样容易采用——它从一开始就可以与现有的 Android 代码完全互操作。</p>
<p>是否迁移到 Compose 取决于您和您的团队。如果您正在构建一个新的 app，最好的选择可能是使用 Compose 来实现 app 的整个 UI 界面。我们知道大多数人都有大量的现有代码库，可以将 Compose 与现有的 UI 设计结合起来，而无需重写应用。</p>
<p>可以通过以下两种主要的方式将 Compose 与基于视图的 UI 结合起来:</p>
<ul>
<li><p>您可以添加 Compose 元素到现有的 UI，或者创建一个全新的基于 Compose 的屏幕，或者是向现有的 fragment 或视图布局中添加 Compose 元素。</p>
</li>
<li><p>您可以将基于视图的 UI 元素添加到可组合的函数中。这样做可以将不基于 Compose 的组件添加到基于 Compose 的组件中，例如: MapView 或 WebView。</p>
</li>
</ul>
<p>我们也发布了一个新库 MDC Compose 主题适配器，它可以让您在 Compose UI 中复用现有的 Material Components 主题。</p>
<ul>
<li><p>MDC Compose 主题适配器</p>
<p><a target="_blank" rel="noopener" href="https://material-components.github.io/material-components-android-compose-theme-adapter/">https://material-components.github.io/material-components-android-compose-theme-adapter/</a></p>
</li>
<li><p>Material Components</p>
<p><a target="_blank" rel="noopener" href="https://material.io/develop/android/">https://material.io/develop/android/</a></p>
</li>
</ul>
<p>要了解更多相关信息，请参阅 Compose for existing apps codelab 或查看以下两个示例:</p>
<ul>
<li>Tivi 和 Sunflower 展示了如何在现有项目中集成 Compose</li>
<li>Crane 示例应用展示了如何在 Compose 嵌入一个 MapView</li>
</ul>
<ul>
<li><p>Compose for existing apps codelab</p>
<p><a target="_blank" rel="noopener" href="https://codelabs.developers.google.com/codelabs/android-compose-migration">https://codelabs.developers.google.com/codelabs/android-compose-migration</a></p>
</li>
<li><p>Tivi </p>
<p><a target="_blank" rel="noopener" href="http://tivi.app/">http://tivi.app</a></p>
</li>
<li><p>Sunflower</p>
<p><a target="_blank" rel="noopener" href="http://goo.gle/sunflower-compose">http://goo.gle/sunflower-compose</a></p>
</li>
<li><p>Crane 示例应用</p>
<p><a target="_blank" rel="noopener" href="https://github.com/android/compose-samples/">https://github.com/android/compose-samples/</a></p>
</li>
<li><p>观看视频: 将 Compose 加入现有的应用</p>
<p><a target="_blank" rel="noopener" href="https://youtu.be/PjQdFmiDgwk">https://youtu.be/PjQdFmiDgwk</a></p>
</li>
</ul>
<p><strong>强大的工具</strong></p>
<p>Android Studio 中包含了辅助您使用 Jetpack Compose 的强大工具，可以帮助您快递迭代 UI 元素。</p>
<p>借助 Compose 布局预览，您可以预览 Compose 组件，而无需将应用部署到设备或模拟器。在开发应用时，您的预览会更新，以帮助您更快地检查变更。要创建布局预览，请编写一个不使用任何参数的 Composable 函数，并添加:</p>
<ul>
<li><pre><code class="kotlin">@Preview annotation</code></pre>
</li>
</ul>
<p>完成应用构建后，预览功能的 UI 会出现在 Android Studio 的 <strong>Preview</strong> 窗格中。</p>
<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/rFWVXwibLGtw9y7BgGYN5JAMv0vVBgVAqXWTz0Tso149iaOKxBYRico5llkUlbpzFBicGKicsNOKoc0sfOHDoLZhPmA/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" alt="img"></p>
<p>Android Studio 提供了<em>交互式预览模式</em>。在交互式预览模式下，您可以在 UI 元素中点击或输入，UI 将会响应，就像是在已安装的应用中一样。</p>
<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/rFWVXwibLGtw9y7BgGYN5JAMv0vVBgVAqtRBInhmibWT0WrAveCNaYich3CyZxU4mJpehFmicibPb9EH7ktNyG34vOA/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" alt="img"></p>
<p>交互式预览工具</p>
<p>您也可以将单个可组合功能部署到物理设备或 Android Emulator。Android Studio 会创建一个新的 Activity，其中包含由将该功能所生成的 UI，并将其部署到您在设备上的应用。这样您就可以实际体验测试 UI，而无需重新安装整个应用或导航到当前页面。</p>
<p><img src="http://mmbiz.qpic.cn/mmbiz_png/rFWVXwibLGtw9y7BgGYN5JAMv0vVBgVAqibZaczuDYuC4SiaDCXiaX93jibe8vTYrDuPbBZF86XyW4N786IJBGqibeGw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="img"></p>
<p>可组合元素预览</p>
<p><strong>开始使用 Jetpack Compose</strong></p>
<p>要开始使用 Jetpack Compose，请参阅 Compose 教程并进行设置。或者直接进入示例应用并在 “Compose by Example” 中浏览这些应用:</p>
<ul>
<li><p>Compose 教程</p>
<p><a target="_blank" rel="noopener" href="https://developer.android.google.cn/jetpack/compose/tutorial">https://developer.android.google.cn/jetpack/compose/tutorial</a></p>
</li>
<li><p>进行设置</p>
<p><a target="_blank" rel="noopener" href="https://developer.android.google.cn/jetpack/compose/setup#add-compose">https://developer.android.google.cn/jetpack/compose/setup#add-compose</a></p>
</li>
<li><p>示例应用</p>
<p><a target="_blank" rel="noopener" href="https://www.github.com/android/compose-samples">https://www.github.com/android/compose-samples</a></p>
</li>
<li><p>观看视频: Compose 示例 </p>
<p><a target="_blank" rel="noopener" href="https://youtu.be/DDd6IOlH3io">https://youtu.be/DDd6IOlH3io</a></p>
</li>
</ul>
<p>欢迎访问 Compose 学习计划，了解包括新增的 Codelab 和扩展文档的更多 Compose 资源。</p>
<ul>
<li><p>Compose 学习计划</p>
<p><a target="_blank" rel="noopener" href="https://developer.android.google.cn/courses/pathways/compose">https://developer.android.google.cn/courses/pathways/compose</a></p>
</li>
<li><p>新增的 Codelab</p>
<p><a target="_blank" rel="noopener" href="http://goo.gle/compose-codelabs">http://goo.gle/compose-codelabs</a></p>
</li>
</ul>
<p>自我们<a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652049181&idx=1&sn=36d01a94cd88978273ecaa789463a071&chksm=808caf58b7fb264e4109ce419ea511c5c7ab83749bcb0702a8280ea9e17d7b9af173ba053be9&scene=21#wechat_redirect">去年</a>开源 Jetpack Compose 以来，众多开发者为我们提供了宝贵反馈，使我们有了今天的成就，感谢大家！</p>
<p>我们还在提升 API 的稳定性和优化性能，因此目前还不建议您将 Compose 完全投入到生产环境中。但我们希望大家可以试用并向我们分享反馈。您也可以加入 Kotlin Slack 的 #compose 频道或在微信留言区与我们讨论。Compose 1.0 预期将在 2021 年发布。</p>
<ul>
<li><p>分享反馈</p>
<p><a target="_blank" rel="noopener" href="https://issuetracker.google.com/issues/new?component=612128">https://issuetracker.google.com/issues/new?component=612128</a></p>
</li>
<li><p>Kotlin Slack</p>
<p><a target="_blank" rel="noopener" href="https://surveys.jetbrains.com/s3/kotlin-slack-sign-up">https://surveys.jetbrains.com/s3/kotlin-slack-sign-up</a></p>
</li>
</ul>

        </div>

    </div>

    

    

    

    

    

    
<nav class="article-nav">
  
    <a href="/2020/10/07/%E6%88%91%E4%BB%AC%E8%A6%81%E4%B8%8D%E8%A6%81%E4%B8%8A%E7%BA%BF%E3%80%8C%E4%B8%AA%E4%BA%BAapp%E3%80%8D-%EF%BC%9F/" id="article-nav-newer" class="article-nav-link-wrap">
      <div class="article-nav-caption">下一篇</div>
      <div class="article-nav-title">
        
          我们要不要上线「个人app」 ？
        
      </div>
    </a>
  
  
    <a href="/2020/08/31/Android-10-Q-11-R-%E5%88%86%E5%8C%BA%E5%AD%98%E5%82%A8%E9%80%82%E9%85%8D/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-caption">上一篇</div>
      <div class="article-nav-title">Android 10(Q)/11(R) 分区存储适配</div>
    </a>
  
</nav>


    <section class="share">
        <div class="share-title">分享</div>
        <a class="share-item" target="_blank"
            href="https://twitter.com/share?text=Jetpack Compose Alpha 版现已发布！ - ApocalypseBlog&url=http://example.com/2020/09/08/Jetpack-Compose-Alpha-%E7%89%88%E7%8E%B0%E5%B7%B2%E5%8F%91%E5%B8%83%EF%BC%81/">
            <box-icon type='logo' name='twitter'></box-icon>
        </a>
        <a class="share-item" target="_blank"
            href="https://www.facebook.com/sharer.php?title=Jetpack Compose Alpha 版现已发布！ - ApocalypseBlog&u=http://example.com/2020/09/08/Jetpack-Compose-Alpha-%E7%89%88%E7%8E%B0%E5%B7%B2%E5%8F%91%E5%B8%83%EF%BC%81/">
            <box-icon name='facebook-square' type='logo' ></box-icon>
        </a>
        <!-- <a class="share-item" target="_blank"
            href="https://service.weibo.com/share/share.php?title=Jetpack Compose Alpha 版现已发布！ - ApocalypseBlog&url=http://example.com/2020/09/08/Jetpack-Compose-Alpha-%E7%89%88%E7%8E%B0%E5%B7%B2%E5%8F%91%E5%B8%83%EF%BC%81/&pic=">
            <div class="n-icon n-icon-weibo"></div>
        </a> -->
    </section>

</article>









</div>
                </section>
            </section>

             
            <aside class="sidebar">
            
                
            </aside>
        </div>
    </div>

    <footer class="footer">
    <div class="footer-wave">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3c4859" fill-opacity="1" d="M0,160L60,181.3C120,203,240,245,360,240C480,235,600,181,720,186.7C840,192,960,256,1080,261.3C1200,267,1320,213,1380,186.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
    </div>

    <div class="footer-wrap">
        <div class="footer-inner"> 
            ApocalypseBlog &copy; 2021<br>
            Powered By Hexo · Theme By <a href="https://github.com/lh1me/hexo-theme-aomori" target="_blank">Aomori</a>
        </div>
    </div>

</footer>




<script src="/dist/build.js?1.14.0.js"></script>


<script src="/dist/custom.js?1.14.0.js"></script>









</body>

</html>